<template>
  <view class="container">
    <block v-if="isload">
      <view class="pageback" :style="{ background: backcolor == '' ? '#f58d40' : backcolor }"></view>
      <view class="wrap" :style="'background-image:url(' + info.bgpic + ');background-size:100% 100%;'">
        <view class="header clearfix">
          <view class="rule" @tap="changemaskrule">活动规则</view>
          <view @tap="goto" :data-url="'myprize?hid=' + info.id" class="my">我的奖品</view>
        </view>
        <view class="title" :style="'background-image:url(' + info.banner + ');background-size:100% 100%;'"></view>

        <view class="canvas" :hidden="showmaskrule || jxshow">
          <canvas canvas-id="roulette" style="width: 650rpx; height: 650rpx"> </canvas>
          <!-- <cover-image :src="pre_url + '/static/img/xydzp_start.png'" class="start" @tap="rollStart"></cover-image> -->
          <cover-image src="/static/img/cjzz.png" class="start" @tap="rollStart"></cover-image>
        </view>

        <view class="border" v-if="info.use_type != 2"
          >您今日还有 <text id="change">{{ remaindaytimes }}</text> 次抽奖机会</view
        >
        <view class="border2" v-if="info.use_type == 1 && info.usescore > 0"
          ><text v-if="!info.is_tr">每次</text><text v-else>本次</text>抽奖将消耗 <text>{{ info.usescore }}</text> {{ t('积分') }}，您共有 <text id="myscore">{{ member.score }}</text>
          {{ t('积分') }}</view
        >
        <view class="border2" v-if="info.use_type == 2 && info.usemoney > 0"
          >每次抽奖将消耗 <text>{{ t('余额') }}</text
          >{{ info.usemoney }}元 ，您共有 <text id="mymoney">{{ member.money }}</text> 元</view
        >
        <view class="border2" v-if="info.use_type == 3 && info.use_green_score > 0"
          ><text v-if="!info.is_tr">每次</text><text v-else>本次</text>抽奖将消耗 <text>{{ info.use_green_score }}</text> {{ t('绿色积分')
          }}<!-- ，您共有 <text id="myscore">{{member.use_green_score}}</text> {{t('绿色积分')}} --></view
        >
        <view class="border2" v-if="info.use_type == 4 && info.usennt > 0"
          >每次抽奖将消耗 <text>{{ t('HDT') }}</text
          >{{ info.usennt
          }}<!-- 元 ，您共有 <text id="mymoney">{{member.usennt}}</text> 元 --></view
        >
		<view class="border2" v-if="info.use_type == 5 && info.usegold > 0"
		  >每次抽奖将消耗 <text>{{ t('金豆') }}</text
		  >{{ info.usegold
		  }}<!-- 元 ，您共有 <text id="mymoney">{{member.usennt}}</text> 元 --></view
		>
        <!--滚动信息-->
        <view class="scroll">
          <view class="p" :style="'background-image: url(' + pre_url + '/static/img/dzp/list.png);background-size:100% 100%;'"></view>
          <view class="sideBox">
            <swiper class="bd" autoplay="true" :indicator-dots="false" current="0" :vertical="true" circular="true">
              <swiper-item v-for="(item, index) in zjlist" :key="index" class="sitem" v-if="index % 2 == 0">
                <view
                  >恭喜{{ item.nickname }} 获得<text class="info">{{ item.jxmc }}</text></view
                >
                <view v-if="zjlist[index + 1]"
                  >恭喜{{ zjlist[index + 1].nickname }} 获得<text class="info">{{ zjlist[index + 1].jxmc }}</text></view
                >
              </swiper-item>
            </swiper>
          </view>
        </view>

        <view id="mask-rule" v-if="showmaskrule">
          <view class="box-rule">
            <view class="h2">活动规则说明</view>
            <view id="close-rule" :style="'background-image:url(' + pre_url + '/static/img/dzp/close.png);background-size:100%'" @tap="changemaskrule"></view>
            <view class="con">
              <view class="text">
                <text decode="true" space="true">{{ info.guize }}</text>
              </view>
            </view>
          </view>
        </view>
        <!--中奖提示-->
        <view id="mask" v-if="jxshow && jx > 0">
          <view class="blin"></view>
          <view class="caidai" :style="'background-image: url(' + pre_url + '/static/img/dzp/dianzhui.png);'"></view>
          <view class="winning reback" :style="'background:url(' + pre_url + '/static/img/dzp/bg2.png) no-repeat;background-size:100% 100%;'">
            <view class="p">
              <view>恭喜您抽中了</view>
              <view class="b" id="text1">{{ jxmc }}</view>
            </view>
            <view @tap="changemask" class="btn">确定</view>
          </view>
        </view>
        <!--未中奖提示-->
        <view id="mask2" v-if="jxshow && jx == 0">
          <view class="blin"></view>
          <view class="caidai" :style="'background-image: url(' + pre_url + '/static/img/dzp/dianzhui.png);'"></view>
          <view class="winning reback" :style="'background:url(' + pre_url + '/static/img/dzp/bg3.png) no-repeat;background-size:100% 100%;'">
            <view class="p">
              <view class="b" id="text2">{{ jxmc }}</view>
            </view>
            <view @tap="changemask" class="btn">确定</view>
          </view>
        </view>
      </view>
    </block>
    <loading v-if="loading"></loading>
    <dp-tabbar :opt="opt"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var dot_inter, bool
var app = getApp()
var windowWidth = uni.getSystemInfoSync().windowWidth

export default {
  data() {
    return {
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,

      pre_url: app.globalData.pre_url,
      speed: 10,

      /**转盘速度 */
      speedDot: 1000,

      /**点切换速度 */
      dotColor: ['#ffffff', '#FCDF00'],
      dotColor_1: ['#ffffff', '#FCDF00'],
      dotColor_2: ['#FCDF00', '#ffffff'],
      jxshow: false,
      showmaskrule: false,
      info: {},
      member: {},
      remaindaytimes: 0,
      remaintimes: 0,
      zjlist: [],
      jxarr: '',
      latitude: '',
      longitude: '',
      angelTo: '',
      jxmc: '',
      jx: '',
      backcolor: ''
    }
  },

  onLoad: function (opt) {
    this.opt = app.getopts(opt)
	this.opt = app.getopts(opt);
	if(this.opt && this.opt.st){
		this.st = this.opt.st;
	}
	
	if(this.opt.token != undefined){
		this.setlogin();
	}else{
		
		this.getdata()
	}
  },
  onPullDownRefresh: function () {
    this.getdata()
  },
  onShareAppMessage: function () {
    var that = this
    var title = that.info.name
    if (that.info.sharetitle) title = that.info.sharetitle
    var sharepic = that.info.sharepic ? that.info.sharepic : ''
    var sharelink = that.info.sharelink ? that.info.sharelink : ''
    var sharedesc = that.info.sharedesc ? that.info.sharedesc : ''
    return this._sharewx({
      title: title,
      desc: sharedesc,
      link: sharelink,
      pic: sharepic,
      callback: function () {
        that.sharecallback()
      }
    })
  },
  onShareTimeline: function () {
    var that = this
    var title = that.info.name
    if (that.info.sharetitle) title = that.info.sharetitle
    var sharepic = that.info.sharepic ? that.info.sharepic : ''
    var sharelink = that.info.sharelink ? that.info.sharelink : ''
    var sharedesc = that.info.sharedesc ? that.info.sharedesc : ''
    var sharewxdata = this._sharewx({
      title: title,
      desc: sharedesc,
      link: sharelink,
      pic: sharepic,
      callback: function () {
        that.sharecallback()
      }
    })
    var query = sharewxdata.path.split('?')[1]
    return {
      title: sharewxdata.title,
      imageUrl: sharewxdata.imageUrl,
      query: query
    }
  },
  methods: {
	  setlogin:function(){
	  	var that = this;
	  	app.post("ApiIndex/logintogether", {gtksession:that.opt.token}, function (res) {
	  		that.getdata();
	  	});
	  },
    getdata: function () {
      var that = this
      var id = that.opt.id
      that.loading = true
      app.get('ApiChoujiang/index', { id: id }, function (res) {
        that.loading = false
        if (res.status == 0) {
          app.alert(res.msg)
          return
        }
        that.info = res.info
        that.jxarr = res.jxarr
        that.member = res.member
        that.remaindaytimes = res.remaindaytimes
        that.remaintimes = res.remaintimes
        that.zjlist = res.zjlist
        that.backcolor = res.info.bgcolor
        uni.setNavigationBarTitle({
          title: res.info.name
        })
        that.downloadFile(res.jxarr, 0)
        if (that.info.fanwei == 1) {
          app.getLocation(function (res) {
            var latitude = res.latitude
            var longitude = res.longitude
            that.latitude = latitude
            that.longitude = longitude
            console.log(longitude)
          })
        }
        var title = that.info.name
        if (that.info.sharetitle) title = that.info.sharetitle
        var sharepic = that.info.sharepic ? that.info.sharepic : ''
        var sharelink = that.info.sharelink ? that.info.sharelink : ''
        var sharedesc = that.info.sharedesc ? that.info.sharedesc : ''
        that.loaded({
          title: title,
          desc: sharedesc,
          link: sharelink,
          pic: sharepic,
          callback: function () {
            that.sharecallback()
          }
        })
      })
    },
    sharecallback: function () {
      var that = this
      app.post('ApiChoujiang/share', { hid: that.info.id }, function (res) {
        if (res.status == 1) {
          setTimeout(function () {
            that.getdata()
          }, 1000)
        } else if (res.status == 0) {
          //dialog(res.msg);
        }
      })
    },
    downloadFile: function (jxarr, i) {
      var that = this
      if (jxarr[i].pic) {
        uni.downloadFile({
          url: jxarr[i].pic,
          success: function (res) {
            if (res.tempFilePath) {
              jxarr[i].pic = res.tempFilePath
              that.jxarr = jxarr
            }
          },
          complete: function () {
            if (jxarr.length > i + 1) {
              that.downloadFile(jxarr, i + 1)
            } else {
              that.dotStart()
            }
          }
        })
      } else {
        if (jxarr.length > i + 1) {
          that.downloadFile(jxarr, i + 1)
        } else {
          that.dotStart()
        }
      }
    },
    changemaskrule: function () {
      this.showmaskrule = !this.showmaskrule
    },
    changemask: function () {
      this.jxshow = !this.jxshow
      this.getdata()
    },
    rollStart: function () {
      var that = this
      if (bool) return // 如果在执行就退出
      bool = true // 标志为 在执行
      app.post('ApiChoujiang/index', { id: that.info.id, op: 'getjx', longitude: that.longitude, latitude: that.latitude }, function (res) {
        if (res.status != 1) {
          app.alert(res.msg)
          bool = false
          return
        } else {
          //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
          var angel = 360 - (360 / res.jxcount) * res.jxindex
        }
        angel += 360 * 6
        var baseStep = 30 // 起始滚动速度

        var baseSpeed = 0.3
        var count = 1
        var timer = setInterval(function () {
          that.angelTo = count
          clearInterval(dot_inter)
          that.drawCanvas()

          if (count == angel) {
            console.log('完毕')
            bool = false
            clearInterval(timer)
            that.jxshow = true
            that.jxmc = res.jxmc
            that.jx = res.jx
            that.dotStart()

            if (res.jxtp == 2 && res.spdata) {
              uni.sendBizRedPacket({
                timeStamp: res.spdata.timeStamp,
                // 支付签名时间戳，
                nonceStr: res.spdata.nonceStr,
                // 支付签名随机串，不长于 32 位
                package: res.spdata.package,
                //扩展字段，由商户传入
                signType: res.spdata.signType,
                // 签名方式，
                paySign: res.spdata.paySign,
                // 支付签名
                success: function (res) {
                  console.log(res)
                },
                fail: function (res) {
                  console.log(res)
                },
                complete: function (res) {
                  console.log(res)
                }
              })
            }
          }

          count = count + baseStep * ((angel - count) / angel > baseSpeed ? baseSpeed : (angel - count) / angel)

          if (angel - count < 0.5) {
            count = angel
          }
        }, that.speed)
      })
    },
    drawCanvas: function () {
      var that = this
      var ctx = uni.createCanvasContext('roulette', this)
      var angelTo = this.angelTo || 0
      var width = (windowWidth / 750) * 650
      var height = width
      var x = width / 2
      var y = width / 2
      var num = that.jxarr.length
      ctx.translate(x, y)
      ctx.clearRect(-width, -height, width, height)
      ctx.rotate((angelTo * Math.PI) / 180) // 画外圆

      ctx.beginPath()
      ctx.lineWidth = width / 2
      ctx.strokeStyle = '#FFF7C5'
      ctx.arc(0, 0, width / 4, 0, 2 * Math.PI)
      ctx.stroke()
      ctx.beginPath()
      ctx.lineWidth = 1
      ctx.strokeStyle = '#D9644F'
      ctx.arc(0, 0, width / 2 - 1, 0, 2 * Math.PI)
      ctx.stroke()
      ctx.beginPath()
      ctx.lineWidth = 2
      ctx.strokeStyle = '#FDF28C'
      ctx.arc(0, 0, width / 2 - 3, 0, 2 * Math.PI)
      ctx.stroke()
      ctx.beginPath()
      ctx.lineWidth = 15
      ctx.strokeStyle = '#F8645E'
      ctx.arc(0, 0, width / 2 - 14, 0, 2 * Math.PI)
      ctx.stroke() // 装饰点

      var dotColor = that.dotColor
      var startAngel = 0

      for (var i = 0; i < 26; i++) {
        ctx.beginPath()
        var radius = width / 2 - 14
        var xr = radius * Math.cos(startAngel)
        var yr = radius * Math.sin(startAngel)
        ctx.fillStyle = dotColor[i % dotColor.length]
        ctx.arc(xr, yr, 4, 0, 2 * Math.PI)
        ctx.fill()
        startAngel += (360 / 26) * (Math.PI / 180)
      }

      var jxarr = that.jxarr
      ctx.rotate((-(360 / num) * Math.PI) / 180)

      for (var i = 0; i < num; i++) {
        ctx.rotate(((360 / num) * Math.PI) / 180) //ctx.setFontSize(14)

        ctx.font = 'normal bold 14px Arial'
        ;(ctx.fillStyle = '#e75228'), (ctx.textAlign = 'center')
        ctx.fillText(jxarr[i].mc, 0, -(width / 2 - 50))
        ctx.drawImage(jxarr[i].pic, -20, -(width / 2 - 70), 40, 40) //ctx.restore();
      }

      if (num % 2 == 0) {
        ctx.rotate(((180 / num) * Math.PI) / 180)
      }

      for (var i = 0; i < num; i++) {
        //ctx.save();
        ctx.rotate(((360 / num) * Math.PI) / 180)
        ctx.beginPath()
        ctx.lineWidth = 2
        ctx.moveTo(0, 0)
        ctx.lineTo(0, width / 2 - 20)
        ctx.setStrokeStyle('#f6625c')
        ctx.stroke()
      }

      ctx.draw()
    },
    dotStart: function () {
      var that = this
      var times = 0
      that.drawCanvas()
      dot_inter = setInterval(function () {
        if (times % 2) {
          var dotColor = that.dotColor_1
        } else {
          var dotColor = that.dotColor_2
        }

        times++
        that.dotColor = dotColor
        that.drawCanvas()
      }, that.speedDot)
    }
  }
}
</script>
<style>
.canvas {
  position: relative;
}
.canvas {
  width: 650rpx;
  height: 650rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
}
.canvas > canvas {
  z-index: 0;
}
.start {
  height: 200rpx;
  width: 160rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -80rpx;
  margin-top: -110rpx;
  z-index: 2;
}

.wrap {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  padding: 22rpx 37rpx 0 37rpx;
  display: flex;
  justify-content: space-between;
}
.rule,
.my {
  width: 140rpx;
  height: 60rpx;
  border: 1px solid #f58d40;
  font-size: 30rpx;
  line-height: 60rpx;
  text-align: center;
  color: #f58d40;
  border-radius: 5rpx;
}
.title {
  width: 640rpx;
  height: 316rpx;
  margin: auto;
  margin-top: -60rpx;
}

/*次数*/
.border {
  width: 380rpx;
  height: 64rpx;
  margin: 0 auto 25rpx;
  background: #fb3a13;
  font-size: 24rpx;
  line-height: 64rpx;
  text-align: center;
  color: #fff;
  border-radius: 45rpx;
}
.border2 {
  width: 550rpx;
  height: 50rpx;
  margin: 0 auto;
  background: #dbaa83;
  font-size: 24rpx;
  line-height: 50rpx;
  text-align: center;
  color: #fff;
  border-radius: 10rpx;
}
.scroll {
  width: 550rpx;
  height: 185rpx;
  margin: 75rpx auto 0 auto;
}
.scroll .p {
  width: 372rpx;
  height: 24rpx;
  margin: auto;
}
.sideBox {
  width: 100%;
  height: 100rpx;
  margin-top: 20rpx;
  padding: 10rpx 0 10rpx 0;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10rpx;
  overflow: hidden;
}
.sideBox .bd {
  width: 100%;
  height: 80rpx;
  overflow: hidden;
}
.sideBox .sitem {
  overflow: hidden;
  text-align: center;
  font-size: 20rpx;
  line-height: 40rpx;
  color: #fff;
}

/*规则弹窗*/
#mask-rule,
#mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}
#mask-rule .box-rule {
  position: relative;
  margin: 30% auto;
  padding-top: 40rpx;
  width: 90%;
  height: 675rpx;
  border-radius: 20rpx;
  background-color: #f58d40;
}
#mask-rule .box-rule .star {
  position: absolute;
  left: 50%;
  top: -100rpx;
  margin-left: -130rpx;
  width: 259rpx;
  height: 87rpx;
}
#mask-rule .box-rule .h2 {
  width: 100%;
  text-align: center;
  line-height: 34rpx;
  font-size: 34rpx;
  font-weight: normal;
  color: #fff;
}
#mask-rule #close-rule {
  position: absolute;
  right: 34rpx;
  top: 38rpx;
  width: 40rpx;
  height: 40rpx;
}
/*内容盒子*/
#mask-rule .con {
  overflow: auto;
  position: relative;
  margin: 40rpx auto;
  padding-right: 15rpx;
  width: 580rpx;
  height: 82%;
  line-height: 48rpx;
  font-size: 26rpx;
  color: #fff;
}
#mask-rule .con .text {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: auto;
}
/*中奖提示*/
#mask,
#mask2 {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}
#mask .blin,
#mask2 .blin {
  width: 100%;
  height: 100%;
  -o-animation: circle 10s linear infinite;
  -ms-animation: circle 10s linear infinite;
  -moz-animation: circle 10s linear infinite;
  -webkit-animation: circle 10s linear infinite;
  animation: circle 10s linear infinite;
}
@keyframes circle {
  0% {
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#mask .caidai,
#mask2 .caidai {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
#mask .winning,
#mask2 .winning {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 675rpx;
  height: 600rpx;
  margin: -300rpx 0 0 -338rpx;
  -o-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
}
#mask .reback,
#mask2 .reback {
  -o-animation: reback 0.5s linear forwards;
  -ms-animation: reback 0.5s linear forwards;
  -moz-animation: reback 0.5s linear forwards;
  -webkit-animation: reback 0.5s linear forwards;
  animation: reback 0.5s linear forwards;
}
@keyframes reback {
  100% {
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.winning .p {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 80%;
  margin-left: -40%;
  color: #fff;
  font-size: 52rpx;
  text-align: center;
}
.winning .b {
  font-size: 44rpx;
}
.winning .btn {
  position: absolute;
  left: 50%;
  bottom: 15%;
  z-index: 2;
  width: 364rpx;
  height: 71rpx;
  line-height: 71rpx;
  margin-left: -182rpx;
  background-color: #ffee8d;
  border-radius: 45rpx;
  -webkit-border-radius: 45rpx;
  color: #f62a39;
  text-align: center;
  font-size: 45rpx;
}
@keyframes shake {
  50% {
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
}
@keyframes fadein {
  100% {
    opacity: 1;
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.pageback {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>
